<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>主页</title>


    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
</head>
<body style="background-color: #f8f8f8;">

<div th:replace="~{commons::navbar('attention')}"></div>

<div class="container">
    <div class="row">
        <div class="col-lg-9 col-md-9 col-sm-9 col-xm-9 col-xs-12"
             style="background: white;border-radius: 5px;box-shadow: 0 1px 3px rgba(18,18,18,.1);">

            <!--文章-->
            <div th:each="article:${articles}" class="row"
                 style="margin-top: 10px;margin-left: 20px;margin-right: 15px;margin-bottom: 10px;">

                <a th:href="@{/detail(id=${article.getId()})}" style="text-decoration-line: none;">
                    <h3 th:text="${article.getTitle()}"
                        style="opacity: 0.95;color: #121212;font-weight: bold;font-family: 'Microsoft YaHei',sans-serif;">
                        Spring：没有人比我更懂Java对象的创建！
                    </h3>
                </a>
                <!--<div class="container">
                    <p class="visible-xs img-responsive">小屏可见</p>
                    <p  class="hidden-xs img-responsive">大屏可见</p>
                </div>-->
                <!--大屏显示附带图片的文章-->
                <div class="hidden-xs img-responsive" th:if="${!#strings.isEmpty(article.getImage())}"
                     style="font-size: 15px;display: flex;">
                    <div>
                        <img class="img-rounded" th:src="${article.getImage()}" height="105px" width="190px" alt="">
                    </div>
                    <div style="margin-left: 15px;">
                        <a th:href="@{/manage(uid=${article.getUid()})}" th:text="${article.getName()}">java灬小不点</a>：
                        <a th:href="@{/detail(id=${article.getId()})}" th:text="${article.getContent()}"
                           style="letter-spacing: 1px;text-decoration: none;color: black">一、开篇一问 一个Spring Bean是Java对象吗？
                            那么一个对象是Spring Bean吗？ 带着这个问题我们一起来回顾Spring…</a>
                        <a th:href="@{/detail(id=${article.getId()})}">阅读全文​</a>
                    </div>
                </div>

                <!--小屏显示附带图片的文章-->
                <div class="visible-xs img-responsive" th:if="${!#strings.isEmpty(article.getImage())}"
                     style="font-size: 15px;">
                    <div>
                        <img class="img-rounded" th:src="${article.getImage()}" width="100%" alt="">
                    </div>
                    <div style="margin-left: 15px">
                        <a th:href="@{/manage(uid=${article.getUid()})}" th:text="${article.getName()}">java灬小不点</a>：
                        <a th:href="@{/detail(id=${article.getId()})}" th:text="${article.getContent().length()>=71?article.getContent().substring(0,70):article.getContent()}"
                           style="text-decoration: none;color: black">一、开篇一问 一个Spring Bean是Java对象吗？
                            那么一个对象是Spring Bean吗？ 带着这个问题我们一起来回顾Spring…</a>
                        <a th:href="@{/detail(id=${article.getId()})}">阅读全文​</a>
                    </div>
                </div>

                <!--大屏显示无图片的文章-->
                <div class="hidden-xs img-responsive" th:if="${#strings.isEmpty(article.getImage())}" style="font-size: 16px;">
                    <a th:href="@{/manage(uid=${article.getUid()})}" th:text="${article.getName()}">java灬小不点</a>：
                    <a th:href="@{/detail(id=${article.getId()})}" th:text="${article.getContent()}"
                       style="text-decoration: none;color: black">一、开篇一问 一个Spring Bean是Java对象吗？
                        那么一个对象是Spring Bean吗？ 带着这个问题我们一起来回顾Spring…</a>
                    <a th:href="@{/detail(id=${article.getId()})}">阅读全文​</a>
                </div>

                <!--小屏显示无图片的文章-->
                <div class="visible-xs img-responsive" th:if="${#strings.isEmpty(article.getImage())}" style="font-size: 16px;">
                    <a th:href="@{/manage(uid=${article.getUid()})}" th:text="${article.getName()}">java灬小不点</a>：
                    <a th:href="@{/detail(id=${article.getId()})}" th:text="${article.getContent().length()>=141?article.getContent().substring(0,140):article.getContent()}"
                       style="text-decoration: none;color: black">一、开篇一问 一个Spring Bean是Java对象吗？
                        那么一个对象是Spring Bean吗？ 带着这个问题我们一起来回顾Spring…</a>
                    <a th:href="@{/detail(id=${article.getId()})}">阅读全文​</a>
                </div>

                <div class="row" style="margin-top: 20px">
                    <button th:onclick="'javascript:agree('+${article.getId()}+',this);'" type="button" class="btn btn-default btn-sm" style="color: #0084ff;">
                        <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> <span
                            th:text="'赞同'+${article.getAgree()}"></span>
                    </button>

                    <a th:href="@{/detail#a1(id=${article.getId()})}" class="btn btn-link btn-sm" style="color: #8590a6;">
                        <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 添加评论
                    </a>
                    <button th:id="${'star'+article.getId()}" th:onclick="'javascript:star('+${article.getId()}+',this);'" class="btn btn-link btn-sm" style="color: #8590a6;">
                        <span th:if="${!article.isStar}" class="glyphicon glyphicon-star" aria-hidden="true"></span> <span th:if="${!article.isStar}">收藏</span>
                        <span th:if="${article.isStar}" style="color: #0084ff"  class="glyphicon glyphicon-star" aria-hidden="true"></span> <span th:if="${article.isStar}" style="color: #0084ff">收藏</span>
                    </button>

                    <button th:id="${'agree'+article.getId()}" th:onclick="'javascript:agree('+${article.getId()}+',this);'" class="btn btn-link btn-sm" style="color: #8590a6;">
                        <span th:if="${!article.isAgree}" class="glyphicon glyphicon-heart" aria-hidden="true"></span> <span th:if="${!article.isAgree}">喜欢</span>
                        <span th:if="${article.isAgree}" style="color: #0084ff" class="glyphicon glyphicon-heart" aria-hidden="true"></span> <span th:if="${article.isAgree}" style="color: #0084ff">喜欢</span>
                    </button>
                    <span th:if="${session.get('user')!=null&&session.get('user').id==article.getUid()}" class="dropdown">
                            <button style="border: none" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                <li><a th:href="@{/user/addArticle(id=${article.getId()})}">编辑</a></li>
                                <li><a id="deletex" th:href="@{/user/deleteArticle2(id=${article.getId()},location='dashboard')}">删除</a></li>
                            </ul>
                        </span>
                </div>
                <hr>
            </div>

            <!--上下页-->
            <div style="margin-top: 20px">
                <div style="text-align: center">
                    <a th:href="@{/user/attention(id=${articlePage.current-1})}" th:if="${articlePage.current!=1}"
                       type="button"
                       class="btn" style="background-color: #0084ff;color: white">
                        <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> 上一页
                    </a>
                    <a th:href="@{/user/attention(id=${articlePage.current+1})}"
                       th:if="${articlePage.current!=articlePage.pages}"
                       type="button" class="btn" style="background-color: #0084ff;color: white">
                        <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span> 下一页
                    </a>
                </div>
            </div>
            <br>
            <br>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xm-3  hidden-xs ">
            <div>
                <div class="box"
                     style="padding: 15px 10px 10px 40px;background: white;border-radius: 5px;box-shadow: 0 1px 3px rgba(18,18,18,.1);">
                    <div style="margin-left: 15px">
                        <div style="margin: 10px 10px 10px 10px;display: flex">
                            <a th:href="@{/user/addArticle}">
                                <img src="./img/write.png" width="45px" height="45px" class="img-circle" alt="">
                                <p style="font-size: 15px">写文章</p>
                            </a>
                        </div>
                        <div style="margin: 10px 10px 10px 10px;display: flex">
                            <a th:href="@{/user/main}">
                                <img src="./img/guanli.png" width="45px" height="45px" class="img-circle" alt="">
                                <p style="font-size: 15px">管理博客</p>
                            </a>
                        </div>
                        <div style="margin: 10px 10px 10px 10px;display: flex">
                            <a th:href="@{/user/collection}">
                                <img src="./img/msg.png" width="45px" height="45px" class="img-circle" alt="">
                                <p style="font-size: 15px">我的收藏</p>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
            <div style="margin-top: 15px">
                <div class="box"
                     style="padding: 10px 10px 10px 10px;background: white;border-radius: 5px;box-shadow: 0 1px 3px rgba(18,18,18,.1);">
                    <h4 style="font-size: 13px;color: #2b80ff;margin-left: 5px">文章分类</h4>
                    <div class="list-group">
                        <a th:href="@{/sort(tid=${tag.getId()})}" th:each="tag:${tags}" th:text="${tag.getName()}" class="list-group-item">Dapibus ac facilisis in</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
<br>
<br>
<footer class="text-center" style="width: 100%;
            height: 40px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(18,18,18,.1);
            color: black">
    备案/许可证编号为：鄂ICP备2020018205号 <br>
    Copyright@2020-2020MinXuDesigened by MinXu
</footer>
<div id="live2d-widget" class="hidden-xs img-responsive">
    <canvas id="live2dcanvas"></canvas>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/xiantiao.js}"></script>

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            jsonPath: "https://unpkg.com/live2d-widget-model-koharu/assets/koharu.model.json",//这里改模型，前面后面都要改
            "scale": 1
        },
        "display": {
            "position": "right",//设置看板娘的上下左右位置
            "width": 100,
            "height": 250,
            "hOffset": 30,
            "vOffset": 40
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 0.8,//设置透明度
            "opacityOnHover": 0.2
        }
    });
    window.onload = function () {
        $("#live2dcanvas").attr("style", "position: fixed; opacity: 0.7; left: 170px; bottom: 0px; z-index: 1; pointer-events: none;")
    }
</script>
<script th:inline="javascript">
    window.onload=function(){
        var bt=document.getElementById("deletex");
        bt.onclick=function(){
            if(confirm("真的要删除吗?")){
                return true;
            }
            else{
                return false;
            }
        }
    }
    function star(id) {
        console.log(id);
        var user = '[[${session.user}]]';
        let str = JSON.stringify(user);
        console.log(str)
        console.log(str.length)
        console.log(str.length===6)
        if(str.length===6)
        {
            alert("请先登录");
            return;
        }
        $.ajax({
            type: "get",
            url: "/star",
            data: {aid:id},
            dataType: "json",
            success: function (res) {
                if (res) {
                    console.log("收藏成功");
                    document.getElementById("star"+id).innerHTML="<span style=\"color: #0084ff\" class=\"glyphicon glyphicon-star\" aria-hidden=\"true\"></span> <span style=\"color: #0084ff\">收藏</span>"
                } else {
                    console.log("收藏失败");
                    document.getElementById("star"+id).innerHTML="<span class=\"glyphicon glyphicon-star\" aria-hidden=\"true\"></span> <span>收藏</span>"
                }
            }
        });
    }
    function agree(id) {
        console.log(id);
        var user = '[[${session.user}]]';
        let str = JSON.stringify(user);
        if(str.length===6)
        {
            alert("请先登录");
            return;
        }
        $.ajax({
            type: "get",
            url: "/agree",
            data: {aid:id},
            dataType: "json",
            success: function (res) {
                if (res) {
                    console.log("点赞成功");
                    console.log("agree"+id);
                    document.getElementById("agree"+id).innerHTML="<span style=\"color: #0084ff\" class=\"glyphicon glyphicon-heart\" aria-hidden=\"true\"></span> <span style=\"color: #0084ff\">喜欢</span>"
                } else {
                    console.log("点赞失败");
                    document.getElementById("agree"+id).innerHTML="<span class=\"glyphicon glyphicon-heart\" aria-hidden=\"true\"></span> <span>喜欢</span>"
                }
            }
        });
    }
</script>
</body>
</html>